<template>
  <!--教学荣誉-->
  <div class="box">
    <p class="align">教学荣誉</p>
    <div class="tea1">
      <div class="five">
        <div class="img" v-for="(item, index) in five" :key="index">
          <p><img :src="item.img" /></p>
          <p @click="but(item.id, index)">点亮</p>
          
        </div>
      </div>
      <div class="jifen">
        <button @click="ckjf()">查看积分</button>
        <p @click="jf()">积分规则</p>
      </div>
    </div>
    
    <section class="wmassageMask" v-show="writeMessageShow">
      <div class="tk">
        <p>{{ts}}</p>
        <p class="border"></p>
        <button @click="qd">确定</button>
      </div>
    </section>

  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      five: [
        { img: require("../assets/honor.png"), id: 1 },
        { img: require("../assets/honor.png"), id: 2 },
        { img: require("../assets/honor.png"), id: 3 },
        { img: require("../assets/honor.png"), id: 4 },
        { img: require("../assets/honor.png"), id: 5 },
      ],
      ts:"",
      writeMessageShow: false
    };
  },
  methods: {
    ckjf(){
      this.$router.push("/jifen");
    },
     jf() {
      this.$router.push("/PointsRules");
    },
    qd(){
      this.writeMessageShow = !this.writeMessageShow
    },
    but(a, indexs) {
      let that=this
      axios
        .post("/api/system/honor", {
          id: localStorage.getItem("ids")
        })
        .then(function (res) {
          console.log(res, "你好");

          if (indexs == 0) {
            if (res.data.data.group == 0) {

              axios
                .post("/honor/star", {
                 id: localStorage.getItem("ids"),
                  honor: 1,
                })
                .then(function (res) {
                  that.writeMessageShow = true,
                  that.ts=res.data.msg
                  console.log(that.ts)
                  // alert(res.data.msg);
                  console.log(res);
                });
            } else {
              alert("已经点亮");
            }
          } else if (indexs == 1) {
            if (res.data.data.speech == 0) {
              axios
                .post("/honor/star", {
                  id: localStorage.getItem("ids"),
                  honor: 2,
                })
                .then(function (res) {
                  
                  that.writeMessageShow = true,
                  that.ts=res.data.msg
                  console.log(res);
                });
            } else {
              alert("已经点亮");
            }
          } else if (indexs == 2) {
            if (res.data.data.make == 0) {
              axios
                .post("/honor/star", {
                  id: localStorage.getItem("ids"),
                  honor: 3,
                })
                .then(function (res) {
                  
                  that.writeMessageShow = true,
                  that.ts=res.data.msg
                  console.log(res);
                });
            } else {
              alert("已经点亮");
            }
          } else if (indexs == 3) {
            if (res.data.data.product == 0) {
              axios
                .post("/honor/star", {
                 id: localStorage.getItem("ids"),
                  honor: 4,
                })
                .then(function (res) {
                  
                  that.writeMessageShow = true,
                  that.ts=res.data.msg
                  console.log(res);
                });
            } else {
              alert("已经点亮");
            }
          } else if (indexs == 4) {
            if (res.data.data.class == 0) {
              axios
                .post("/honor/star", {
                  id: localStorage.getItem("ids"),
                  honor: 5,
                })
                .then(function (res) {
                 
                  that.writeMessageShow = true,
                  that.ts=res.data.msg
                  console.log(res);
                });
            } else {
              alert("已经点亮");
            }
          }




        });

      console.log(this.five, indexs);
    },
  },
};
</script>
<style lang="css" scoped="true">
.box{position: relative;}
.wmassageMask{position: fixed;top: 0;bottom: 0;left: 0;width: 100%;background-color: rgba(0,0,0,.3);z-index: 101;}
.align {
  width: 100%;
  text-align: center;
  color: #f00;
  font-size: 1rem;
  line-height: 2rem;
}
.tea1 {
  width: 90%;
  margin: 0 auto;
  font-size: 15px;
}
.red p {
  line-height: 1.9rem;
}
select {
  width: 50px;
  text-align: center;
  outline: none;
  border: none;
  color: #d62c32;
  border-bottom: 2px solid #d62c32;
  margin-bottom: 5px;
}
.buy {
  display: flex;
  justify-content: flex-start;
}
.jifen button {
  width: 60%;
  line-height: 2rem;
  border-radius: 15px;
  background: #d62c32;
  border: 1px solid #d62c32;
  color: #f7ecec;
  outline: none;
}
.jifen {
  width: 80%;
  margin: 10px auto;
  margin-top: 2rem;
  text-align: center;
  overflow: hidden;
}
.jifen p {
  margin-top: 15px;
  color: #a4a4a4;
  font-size: 12px;
  margin-bottom: 1rem;
}
input {
  width: 50px;
  border: none;
  outline: none;
  border-bottom: 2px solid #d62c32;
  margin-left: 5px;
  text-align: center;
}
.five {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.five .img {
  width: 45%;
  text-align: center;
}
.five .img img {
  width: 100%;
}
.five .img p:last-child {
  width: 60px;
  margin: 0 auto;
  line-height: 1.3rem;
  background: #d62c32;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
}
.tk{width: 80%;margin: 10% 0;background-color: #ccc;position: absolute;top:12rem;left:10%;background-color: #fff;border-radius: 10px;}
.tk button{color: #278ED4;width: 100%;padding: 1rem;border: 0;background-color: #fff;border-radius: 10px;}
.tk p{width: 100%;padding: 2rem 0;text-align: center;}
.tk p.border{border-top:1px solid #ccc;padding:0;width:100%;height: 1px;}
</style>
